<!-- 变量使用 -->
<template>
	<div class="Variable">
		<h1 class="title">变量的创建和使用</h1>
		<div>
			<span>ref创建响应式变量：</span>
			<el-button type="primary" plain size="mini" @click="add">+</el-button>
			{{ count }}
			<el-button type="primary" plain size="mini" @click="reduce">-</el-button>
		</div>
		<div class="echartsBox">
			<echartsBox :options="optionsDate"></echartsBox>
		</div>
	</div>
</template>
<script lang="ts">
import { ref } from 'vue';
import echartsBox from '@/components/echarts.vue';
export default {
	name: 'Variable',
	components: {
		echartsBox,
	},
	setup() {
		// ref 创建响应式变量 使用 .value进行修改
		let count = ref(<number>0);
		const optionsDate = ref({
			xAxis: {
				type: 'category',
				data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
			},
			yAxis: {
				type: 'value',
			},
			series: [
				{
					data: [150, 230, 224, 218, 135, 147, 260],
					type: 'line',
				},
			],
		});
		console.log(count);
		const add = () => {
			count.value++;
		};
		const reduce = () => {
			count.value--;
		};

		return { count, add, reduce, optionsDate };
	},
};
</script>
<style lang="scss" scoped>
.Variable {
	.title {
		text-align: center;
	}
	.echartsBox {
		width: 50vw;
		height: 20vh;
	}
}
</style>
